<template>
  <Modal
    v-model="show"
    :ref="ref"
    :title="title"
    :transfer="true"
    v-bind="config"
    :width="config.width > 0 ? config.width : width"
    @on-ok="ok"
  >
    <div class="content">
      <createView :data="dataSet.createTreeFormData" :attrs="attrs"></createView>
    </div>
    <div slot="footer">
      <Button type="default" @click="cancel">取消</Button>
      <Button type="primary" :loading="loading" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
import createView from "./createTreeView.vue";

export default {
  name: "",
  components: { createView },
  inject: ["anc"],

  data() {
    return {
      ref: "createTreeModal",
      show: false,
      width: 600,
      loading: false,
      title: "新增",
      accept: ".pdf",
    };
  },
  props: {
    config: {
      default: () => {
        return {
          title: "新增",
          width: 0,
          height: 400,
          draggable: false,
          mask: true,
          closable: true,
          okText: "确定",
          cancelText: "取消",
          widthRatio: 0.5,
        };
      },
    },
    dataSet: {
      default: () => {
        return {};
      },
    },
    attrs: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // configData: {
    //   type: Object,
    //   default: () => {
    //     return {};
    //   },
    // },
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      const obs = new ResizeObserver((entries) => {
        this.width = entries[0].contentRect.width * this.config.widthRatio;
      });
      obs.observe(this.$el);
    });
  },
  methods: {
    ok() {
      this.anc.createTreeModalOk();
    },
    cancel() {
      this.show = false;
    },
   
  },
};
</script>
<style scoped lang="scss">
$top: 40px;
.content {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 70vh;
}
</style>
